<template>
  <div id='singer'>
    <!--  左边导航栏  -->
    <ul class='leftnav'>
      <li>
        <h3>华语</h3>
        <ul>
          <li
            :class='{
              active: singerParams.area == 7 && singerParams.type == 1,
            }'
            @click='changeSingerType(7, 1, $event)'
          >
            • 华语男歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 7 && singerParams.type == 2,
            }'
            @click='changeSingerType(7, 2, $event)'
          >
            • 华语女歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 7 && singerParams.type == 3,
            }'
            @click='changeSingerType(7, 3, $event)'
          >
            • 华语组合/乐队
          </li>
        </ul>
      </li>
      <li>
        <h3>欧美</h3>
        <ul>
          <li
            :class='{
              active: singerParams.area == 96 && singerParams.type == 1,
            }'
            @click='changeSingerType(96, 1, $event)'
          >
            • 欧美男歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 96 && singerParams.type == 2,
            }'
            @click='changeSingerType(96, 2, $event)'
          >
            • 欧美女歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 96 && singerParams.type == 3,
            }'
            @click='changeSingerType(96, 3, $event)'
          >
            • 欧美组合/乐队
          </li>
        </ul>
      </li>
      <li>
        <h3>日本</h3>
        <ul>
          <li
            :class='{
              active: singerParams.area == 8 && singerParams.type == 1,
            }'
            @click='changeSingerType(8, 1, $event)'
          >
            • 日本男歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 8 && singerParams.type == 2,
            }'
            @click='changeSingerType(8, 2, $event)'
          >
            • 日本女歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 8 && singerParams.type == 3,
            }'
            @click='changeSingerType(8, 3, $event)'
          >
            • 日本组合/乐队
          </li>
        </ul>
      </li>
      <li>
        <h3>韩国</h3>
        <ul>
          <li
            :class='{
              active: singerParams.area == 16 && singerParams.type == 1,
            }'
            @click='changeSingerType(16, 1, $event)'
          >
            • 韩国男歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 16 && singerParams.type == 2,
            }'
            @click='changeSingerType(16, 2, $event)'
          >
            • 韩国女歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 16 && singerParams.type == 3,
            }'
            @click='changeSingerType(16, 3, $event)'
          >
            • 韩国组合/乐队
          </li>
        </ul>
      </li>
      <li>
        <h3>其他</h3>
        <ul>
          <li
            :class='{
              active: singerParams.area == 0 && singerParams.type == 1,
            }'
            @click='changeSingerType(0, 1, $event)'
          >
            • 其他男歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 0 && singerParams.type == 2,
            }'
            @click='changeSingerType(0, 2, $event)'
          >
            • 其他女歌手
          </li>
          <li
            :class='{
              active: singerParams.area == 0 && singerParams.type == 3,
            }'
            @click='changeSingerType(0, 3, $event)'
          >
            • 其他组合/乐队
          </li>
        </ul>
      </li>
    </ul>
    <div class='content'>
      <h1>{{ title }}</h1>
      <!--   A-Z字母   -->
      <ul class='alphabet'>
        <el-button type='primary' size='mini' @click="changeInitial('-1')"
        >热门
        </el-button>
        <li
          v-for='(letter, index) in alphabet'
          @click='changeInitial(letter)'
          :class='{ liActive: singerParams.initial === letter }'
          :key='index'
        >
          {{ letter.toUpperCase() }}
        </li>
        <li
          style='font-size: 12px'
          @click="changeInitial('#')"
          :class="{ liActive: singerParams.initial === '#' }"
        >
          其他
        </li>
      </ul>

      <!--   前10个歌手   -->
      <ul class='top10'>
        <li v-for='(singer, index) in singers' :key='singer.id' v-show='index < 10'
            @click="toArtist(singer.id,singer.name)">
          <img v-lazy='`${singer.picUrl}?param=130y130`'/>
          <div>
            <a>{{ singer.name }}</a>
            <i
              class='el-icon-user-solid'
              v-if='singer.accountId'
              style='color: #c20c0c'
            ></i>
          </div>
        </li>
      </ul>
      <hr color='#ccccccc' size='1'/>
      <!--   后90个歌手   -->
      <ul class='left90'>
        <li v-for='(singer, index) in singers' :key='singer.id' v-show='index >= 10' @click="toArtist(singer.id,singer.name)">
          <a>{{ singer.name }}</a>
          <i
            class='el-icon-user-solid'
            v-if='singer.accountId'
            style='color: #c20c0c'
          ></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {debounce} from 'lodash' // 防抖

export default {
  name: 'Singer',
  data() {
    return {
      title: '华语男歌手',
      singerParams: {
        initial: '-1',
        type: 1,
        area: 7,
      },
      singers: [],
    }
  },
  mounted() {
    this.getSingerlist()
  },
  computed: {
    alphabet() {
      return Array.from(new Array(26), (ele, index) => {
        return String.fromCharCode(97 + index)
      })
    },
  },
  methods: {
    async getSingerlist() {
      let result = await this.$API.artistList({
        ...this.singerParams,
        limit: 100,
      })
      if (result.data.code === 200) {
        this.singers = result.data.artists
      }
    },
    changeSingerType: debounce(function (area, type, event) {
      this.title = event.target.innerText.replace('• ', '')
      this.singerParams.initial = -1
      this.singerParams.type = type
      this.singerParams.area = area
      this.getSingerlist()
    }, 300),
    changeInitial: debounce(function (word) {
      this.singerParams.initial = word
      this.getSingerlist()
    }, 300),
    toArtist(id, name) {
      this.$router.push({
        path: '/artist',
        query: {
          id,
          title: name // 网页标题
        }
      })
    }
  },
}
</script>

<style scoped lang='less'>
#singer {
  width: 1020px;
  background-color: #ffffff;
  color: #333333;
  margin: 0 auto;
  border: 1px solid #cdcdcd;
  display: flex;

  .leftnav {
    padding: 20px;
    width: 180px;
    background-color: #f9f9f9;
    border-right: 1px #cdcdcd solid;

    h3 {
      font-size: 16px;
    }

    > li {
      border-bottom: 1px solid #d3d3d3;
      padding: 15px;
      font-size: 12px;

      ul li {
        margin: 10px 0 12px 0;
        cursor: pointer;
      }
    }

    .active {
      color: #c20c0c;
    }
  }

  .content {
    flex: 1;
    padding: 40px;
    font-size: 12px;

    h1 {
      border-bottom: 2px solid #c20c0c;
      font-size: 24px;
      padding: 0 0 10px 0;
    }

    .alphabet {
      margin: 12px 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;

      li {
        width: 24px;
        height: 100%;
        text-align: center;
        cursor: pointer;
      }

      .liActive {
        background-color: #fef0f0;
        color: #c20c0c;
        font-weight: bolder;
      }
    }

    .top10 {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;

      li {
        margin: 0 0 20px 0;

        img {
          width: 130px;
          height: 130px;
        }
      }

      li div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

    }

    .left90 {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      li {
        width: 130px;
        margin: 8px 0;
        font-weight: bolder;
      }
    }

    a {
      border-bottom: 1px transparent solid;
    }

    a:hover {
      border-bottom: #c20c0c 1px solid;
    }
  }
}
</style>